<template>
  <div>
    <h1>Article - {{str}} </h1>
  </div>
</template>

<script >
import { ref, getCurrentInstance } from 'vue';
import { useRoute, useRouter } from 'vue-router';
// 获取路由
// 方法1：getCurrentInstance 
// 方法2：import { useRoute, useRouter } from 'vue-router'

export default {

  setup() {
    let str = ref(0)

    // 方法1：getCurrentInstance 
    const { proxy } = getCurrentInstance()
    console.log(proxy.$root.$route)
    console.log(proxy.$root.$router)

    console.log('------------------');

    // 方法2：import { useRoute, useRouter } from 'vue-router'
    const $route = useRoute()
    const $router = useRouter()
    console.log($route.params.id)
    console.log($router)
    str = $route.params.id;
    return { str }
  }
}

</script>

<style module lang="">
</style>